<template>
    <div>
        <div class="top">
            <div class="main">
                <ul>
                    <li>全部订单</li>
                    <li>待付款</li>
                    <li>待发货</li>
                    <li>到收货</li>
                    <li>待评价</li>
                    <li>已完成</li>
                    <li>已取消</li>
                </ul>
            </div>
            <OrderMain v-for="i in data" :key="i.id" :data="i"></OrderMain>
        </div>
        <div class="bottom">
            <PagerView @change="setPage"></PagerView>
        </div>
    </div>
</template>

<script>
import OrderMain from './OrderMain.vue';
import PagerView from './PagerView.vue'
export default {
    name:'ContentView',
    data(){
        return {
            allData:null,
            data:null,
            page:1,
            Arr:[1,2,3,4,5,6,7,8,9,10,11,12]
        }
    },
    methods:{
        setPage(e){
            console.log(e);
            this.page = e;
            let arr = this.allData.slice(this.page*5-5,this.page*5);
            this.data = arr
        }
    },
    watch:{
        // $route:{
        //     handler(val){
        //         console.log(val.params);//新路由信息
        //     },
        //     immediate:true
        // }
    },
    components:{
        OrderMain,
        PagerView,
    },
    async mounted(){
        // 页面第一屏数据
        const res = await this.$.getOrders();
        this.allData = res.data.result.goods;
        let arr = [...res.data.result.goods].slice(this.page*5-5,this.page*5);
        // let arr = this.Arr.slice(this.page*5-5,this.page*5);
        this.data = arr
        console.log(arr);
        // this.data = arr;
        // console.log(this.data)
    }
}
</script>

<style lang="less" scoped>
    div{
        display: flex;
        flex-flow: column;
        flex-wrap: nowrap;
        align-items: center;
        position: relative;
        // height: 100%;
        .top{
            .main{
                width: 1000px;
                // height: 1500px;
                // background: green;
                // overflow: hidden;
                ul{
                    height: 42px;
                    li{
                        width: 84px;
                        line-height: 18px;
                        float: left;
                        font-size: 16px;
                        margin: 13px 12px;
                        // border-top: 1px solid #27ba9b;
                        text-align: center;
                    }
                }
            }
        } 
        .bottom{
            position: absolute;
            bottom: 50px;
        }   
    }
</style>